import React, {useState, useEffect} from 'react'
import { View, Text, Image, Input, RichText } from '@tarojs/components'
import Taro, {useRouter, usePullDownRefresh} from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import CommentsList from '../../components/CommentsList'
import './index.scss'

interface ParamsProps {
  id: string;
}
export interface RouterProps {
  params: ParamsProps;
  [key: string]: any;
}

// 帖子类型
interface TieProps {
  _id: string;
  title: string;
  conetnt: string;
  tabs: string;
  user_id: string;
  top: number;
  is_del: number;
  picUrl: string | null;
  star: number;
  share: number;
  create_at: string;
  update_at: string;
}

// 回复类型
interface ReplyProps {
  conetnt: string;
  create_at: string;
  from_uid: string;
  is_del: number;
  star: number;
}

// 评论回复
export interface CommentProps {
  _id: string;
  reply: ReplyProps[]
  star: number;
  topic_id: string;
  conetnt: string;
  create_at: string;
  from_uid: string;
  is_del: number;
}
type DataProps = {
  tiezi: TieProps;
  comments: CommentProps[];
}
interface ResultProps {
  errCode: string;
  errMsg: string;
  data: DataProps;
}

interface ResProps extends Taro.cloud.CallFunctionResult {
  result: ResultProps;
  [key: string]: any;
}

export default function tieDetail() {
  const [publishComments, setPublishComments] = useState('')
  const [tiezi, setTiezi] = useState<TieProps|null>(null)
  const [comments, setComments] = useState<CommentProps[]>([])
  const [tieziId, setTieziId] = useState('')
  const router = useRouter<RouterProps>()

  // 初始化
  useEffect(() => {
    console.log('路由：', router)
    setTieziId(router.params.id)

    getTieData(router.params.id)
  }, [])

  // 下拉刷新
  usePullDownRefresh(() => {
    getTieData(tieziId)
  })

  // 请求帖子数据
  function getTieData(id) {
    Taro.cloud.callFunction({
      name: 'tiezi',
      data: {
        type: 'getTieziById',
        id
      }
    })
    .then((res: ResProps) => {
      console.log('获取帖子数据：', res.result)
      setTiezi(res.result.data.tiezi)
      setComments(res.result.data.comments)
    })
    .catch(err => {
      console.log('获取帖子数据失败：', err)
    })
  }

  const showAllComments = () => {
    Taro.navigateTo({
      url: '../tieComments/index?id=' + tieziId
    })
  }

  const handlePublishCommentsChange = (v) => {
    console.log('评论内容：', v)
  }

  return (
    <View className='tiezi-detail'>
      {/* 帖子内容 */}
      {
        tiezi ? (
          <View className='tiezi-detail-content'>
        <View className='tiezi-user'>
          <Image mode='aspectFill' src="https://636c-cloud1-6geivl0o33cc257c-1306297348.tcb.qcloud.la/avatar13.png?sign=89aea16a698bb35f1588c3d4c7c8099f&t=1642439178" className='tiezi-avatar'></Image>
          <View className="tiezi-user-right">
            <Text className='tiezi-username'>用户名</Text>
            <View className="tiezi-created">{tiezi.create_at}</View>
          </View>
        </View>

        {/* 内容 */}
        <View className='tiezi-body'>
          <View className='tiezi-title'>标题</View>
          <View className='tiezi-content'>
          {/* {tiezi.conetnt} */}
          <RichText nodes={tiezi.conetnt} />
          </View>
        </View>

        {/* 点赞分享等 */}
        <View className='tiezi-footer'>
          <View className='tiezi-share'>
            <Text className='iconfont icon-fenxiang'></Text>
            <Text className="tiezi-footer-num">1</Text>
          </View>
          <View className='tiezi-comment'>
            <Text className='iconfont icon-pinglun'></Text>
            <Text className="tiezi-footer-num">1</Text>
          </View>
          <View className='tiezi-star'>
            <Text className='iconfont icon-31dianzan'></Text>
            <Text className="tiezi-footer-num">1</Text>
          </View>
        </View>
      </View>
        ): <>请稍等</>
      }

      {/* 评论表 */}
      <View className='tiezi-detail-comments'>
        <View className='comments-title'>评论</View>

        <CommentsList />

        {/* 查看所有评论按钮 */}
        <AtButton circle={true} onClick={showAllComments}>查看全部评论</AtButton>
      </View>

      {/* 发表评论 */}
      <View className='tiezi-publish'>
        <Input
          className='tiezi-publish-input'
          placeholder='说说您的看法'
          value={publishComments}
          onInput={handlePublishCommentsChange}
        />
      </View>
    </View>
  )
}
